<template>
  <div class="container">
    <!-- 内容部分 -->
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.container {
  @include rect(100%, 100%);
  // @include rect(3.75rem, 6.67rem);
  @include flexbox();
  @include flex-direction(column);
  .box {
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto); // 部分浏览器需要加
    @include flexbox();
    @include flex-direction(column);
    // .header {
    //   @include rect(100%, 0.44rem);
    //   @include background-color(#FCCE00);
    //   @include color(#fff);
    //   @include font-size(18px);
    // }
    .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(auto);
    }
  }
  .footer {
    @include rect(100%, 0.48rem);
    @include background-color(#FFFFFF);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex(); // flex: 1;
        @include rect(auto, 100%);
        // 水平垂直居中
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
          // 统一设置图标
        .icons {
          width: .28rem;
          height: .28rem;
          display: inline-block;
          background-size: 100%;
        }
        //未选中时
        .icon-home {
          background-image: url('/img/icons1/home.png');
        }
        .icon-baike {
          background-image: url('/img/icons1/encyclopedia.png');
        }
        .icon-menu {
          background-image: url('/img/icons1/cookbook.png');
        }
        .icon-user {
          background-image: url('/img/icons1/mine.png');
        }
        //选中时的图标
        &.router-link-exact-active,.router-link-active{
          .icon-home {
            background-image: url('/img/icons1/home2.png');
          }
          .icon-baike {
            background-image: url('/img/icons1/encyclopedia2.png');
          }
          .icon-menu {
            background-image: url('/img/icons1/cookbook2.png');
          }
          .icon-user {
            background-image: url('/img/icons1/mine2.png');
          }
        }
        p {
          @include font-size(.09rem);
          line-height: .18rem;
          @include color(#444444)
        }
      }
    }
  }
}
// notedetail删除弹出框样式
.notedatail-del {
  width: 2.82rem;
  height: 1.6rem;
    .van-dialog__message {
      height: 1.1rem;
      line-height: .16rem;
      padding: .395rem 0 0 0;
      font-size:.16rem;
      font-weight:bold;
      color:rgba(51,51,51,1);
    }
  .van-dialog__confirm {
    background-color: #F95E5A;
    .van-button__text {
    font-size:.16rem;
    font-weight:bold;
    color:#FFFFFF;
    }
  }
  .van-button__text {
    font-size:.16rem;
    font-weight:bold;
    color:rgba(102,102,102,1);
  }
}
</style>
